<template>
  <div class="idx-text-content">
    <div class="text-handle">
      <el-button type="success" size="small" effect="dark" @click="copy">复制</el-button>
      <el-button type="warning" size="small" effect="dark" @click="cut">剪切</el-button>
      <el-button type="danger" size="small" effect="dark" @click="clear">清空</el-button>
      <el-button type="primary" size="small" @click="lower">全转小写</el-button>
      <el-button type="primary" size="small" @click="cap">全转大写</el-button>
      <el-button type="primary" size="small" @click="lineToHump">下划线转驼峰</el-button>
      <el-button type="primary" size="small" @click="humpToLine">驼峰转下划线</el-button>
      <el-button type="primary" size="small" @click="firstToUpperCase">句首字母转大写</el-button>
      <el-button type="primary" size="small" @click="spaceToLine">空格转下划线</el-button>
      <el-button type="primary" size="small" @click="spaceClear">清理空格</el-button>
    </div>
    <div class="text-content">
      <el-input type="textarea" v-model="textInfo"></el-input>
    </div>
  </div>
</template>
<script>
import { firstToUpperCase, lineToHump, humpToLine } from '@/utils/java2pojoUtils'
export default {
  data() {
    return {
      textInfo: ''
    }
  },
  methods: {
    copy() {
      navigator.clipboard.writeText(this.textInfo)
      this.$message({
        message: '已复制',
        type: 'success'
      })
    },
    cut(){
      navigator.clipboard.writeText(this.textInfo)
      this.textInfo = ''
      this.$message({
        message: '已剪切',
        type: 'success'
      })
    },
    clear() {
      this.textInfo = ''
    },
    lower() {
      this.textInfo = this.textInfo.toLowerCase()
    },
    cap() {
      this.textInfo = this.textInfo.toUpperCase()
    },
    firstToUpperCase() {
      this.textInfo = firstToUpperCase(this.textInfo)
    },
    lineToHump() {
      this.textInfo = lineToHump(this.textInfo)
    },
    humpToLine() {
      this.textInfo = humpToLine(this.textInfo)
    },
    spaceToLine() {
      this.textInfo = this.textInfo.replaceAll(' ', '_')
    },
    spaceClear() {
      this.textInfo = this.textInfo.replaceAll(' ', '')
    }
  }
}
</script>

<style >
.idx-text-content {
  margin: 1rem;
  width: 122rem;
}

.text-handle > *{
  margin: 1rem;
  cursor: pointer;
}

.text-content {
  margin: 0 1rem 1rem;
}
.text-content {
  width: 120rem;
  height: 44rem;
}

textarea {
  height: 44rem;
}
</style>
